import React, { useState } from "react";
import {
  Button,
  Form,
  Input,
  Select,
  Space,
  Upload,
  InputNumber,
  DatePicker,
  Modal,
} from "antd";
import QRCode from "qrcode.react";
import { PlusOutlined } from "@ant-design/icons";
import { handleUpdate } from "@/api";

const { Option } = Select;
const { TextArea } = Input;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const normFile = (e: any) => {
  if (Array.isArray(e)) {
    return e;
  }
  return e?.fileList;
};

// const CardPage: React.FC = () => {
export default function CardPage() {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);

  const onGenderChange = (value: string) => {
    switch (value) {
      case "male":
        form.setFieldsValue({ note: "Hi, man!" });
        break;
      case "female":
        form.setFieldsValue({ note: "Hi, lady!" });
        break;
      case "other":
        form.setFieldsValue({ note: "Hi there!" });
        break;
      default:
    }
  };

  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({ note: "Hello world!", gender: "male" });
  };

  const submit = () => {
    setVisible(true);
    try {
      form?.validateFields().then((values) => {
        console.log(values);
        handleUpdate(values).then((res) => {
          const { data, status } = res;
          console.log(status, data);

          if (status === 200 && data) {
            setVisible(true);
            // let { data as list , total } = data;
            // mapKey = mapKey.map((i) => {
            //   if (i.key === "description") {
            //     i.width = 500;
            //   }
            //   return i;
            // });
            // setCol(mapKey);
            // setTableData({
            //   list: data.data,
            //   total: data.total,
            //   pageNo:data.pageNo,
            //   pageSize:data.pageSize,

            // })
            // // setTotal(data.total);
            // // setData(list.map((i) => ({ ...i, key: i.msgId })));
            // setLoad(false);
            return;
          }
        });
      });
    } catch (error) {
      console.log(error);
    }
  };

  const handleOk = () => {
    console.log("handleOk");
  };

  const handleCancel = () => {
    console.log("handleCancel");
    setVisible(false);
  };

  return (
    <>
      <Form
        {...layout}
        form={form}
        name="control-hooks"
        onFinish={onFinish}
        style={{ maxWidth: 600 }}
      >
        <Form.Item name="orderNo" label="订单号" rules={[{ required: true }]}>
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item name="userName" label="姓名" rules={[{ required: true }]}>
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item name="userPhone" label="电话" rules={[{ required: true }]}>
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item
          name="productName"
          label="产品名称"
          rules={[{ required: true }]}
        >
          <Input placeholder="请输入" />
        </Form.Item>

        <Form.Item
          name="productSpec"
          label="产品规格"
          rules={[{ required: true }]}
        >
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item
          name="clouthType"
          label="服饰类型"
          // rules={[{ required: true }]}
        >
          <Input placeholder="请输入" />
        </Form.Item>
        {/* <Form.Item name="b" label="执行公司" rules={[{ required: true }]}>
        <Input />
      </Form.Item> */}

        <Form.Item
          name="workUserName"
          label="做工人员"
          // rules={[{ required: true }]}
        >
          <Select
            placeholder="请选择"
            onChange={onGenderChange}
            showSearch
            allowClear
          >
            <Option value="male">张三</Option>
            <Option value="female">李四</Option>
            <Option value="other">王麻子</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="workPrice"
          label="做工价格"
          // rules={[{ required: true }]}
        >
          <InputNumber min={0} defaultValue={0} />
        </Form.Item>
        <Form.Item name="cutUserName" label="裁剪人员">
          <Select
            placeholder="请选择"
            // onChange={onGenderChange}
            allowClear
            showSearch
          >
            <Option value="male">张三</Option>
            <Option value="female">李四</Option>
            <Option value="other">王麻子</Option>
          </Select>
        </Form.Item>
        <Form.Item name="cutPrice" label="剪裁价格">
          <InputNumber min={0} defaultValue={0} />
        </Form.Item>
        <Form.Item
          label="下单时间"
          name="orderTime"
          valuePropName="fileList"
          // getValueFromEvent={normFile}
        >
          <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
        </Form.Item>
        <Form.Item
          name="remark"
          label="订单备注"

        >
          <TextArea placeholder="请输入订单备注" rows={4} />
        </Form.Item>

        {/* <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) =>
          prevValues.gender !== currentValues.gender
        }
      >
        {({ getFieldValue }) =>
          getFieldValue("gender") === "other" ? (
            <Form.Item
              name="customizeGender"
              label="Customize Gender"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
          ) : null
        }
      </Form.Item> */}
        <Form.Item {...tailLayout}>
          <Space>
            <Button type="primary" htmlType="submit" onClick={() => submit()}>
              新建
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
            {/* <Button type="link" htmlType="button" onClick={onFill}>
            Fill form
          </Button> */}
          </Space>
        </Form.Item>
      </Form>

      <Modal
        // size="mini"
        title="二维码"
        open={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
        footer={false}
      >
        <div style={{width:'100%',textAlign:'center'}}>
          <QRCode value="https://www.example.com" />
          <p>订单新建成功，可右键保存二维码</p>
        </div>
      </Modal>
    </>
  );
}

// export default Card;
CardPage.route = { [MENU_PATH]: "/list/card" };
